<template>
  <div id="advice">
    <div class="send-advice">
      <div class="input-item">
        <h2>描述您所遇到的问题</h2>
        <md-field title class="radio-field">
          <md-radio-list v-model="genre" :options="ways" icon-size="lg" />
        </md-field>
      </div>
      <div class="input-item">
        <h2>描述您所遇到的问题</h2>
        <div class="textarear-block">
          <textarea
            v-model="content"
            placeholder="（限制500字） 您可以阐述您遇到的软件功能问题、服务不周问题、小区治理问题、违法违规问题。                                                                            "
          ></textarea>
        </div>
      </div>
      <div class="op-btn">
        <md-button class="btn" @click="submit" size="small" round type="primary" inline>提交</md-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon, InputItem, Toast, Dialog } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [InputItem.name]: InputItem,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog
  },
  name: "advice",
  data() {
    return {
      ways: [
        {
          value: "0",
          text: "向i业主平台投诉"
        },
        {
          value: "1",
          text: "向小区业委会、监事会投诉"
        },
        {
          value: "2",
          text: "向民政机关投诉"
        }
      ],
      genre: "0", //提议类型:0向业主委员会发起提议 1业主发起提议
      content: "" //内容
    };
  },
  computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
  },
  methods: {
    // 提交
    submit(val) {
      let genre = this.genre;
      let mobile = this.mobile;
      let content = this.content;
      if (content == "") {
        Toast.failed("请输入建议");
        return;
      }

      let params = {
        genre,
        mobile,
        content,
        uid: this.$store.state.userInfo.id,
        qid: this.$store.state.residentialType.qid
      };
      https
        .fetchPost(config.feedback, params)
        .then(res => {
          if (res.data.code == 1) {
            console.log(res.data);
            Toast.succeed("提交成功");
            this.content = "";
            this.genre = "0";
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#advice {
  .send-advice {
    padding-top: 50px;
  }
  .tip {
    padding: 30px 30px;
  }
  .input-item {
    margin-bottom: 10px;
    background: #fff;
    h2 {
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .input-tip {
      font-size: 24px;
      color: $themeGold;
      margin: 20px 0;
      padding: 0 30px;
      transform: scale(0.9);
    }
    .title-input-block {
      padding: 0 30px;
      input {
        width: calc(100% - 30px);
        font-size: 28px;
        outline: none;
        line-height: 40px;
        padding: 10px;
        border: 1px solid #eee;
        background: #f8f8f8;
        border-radius: 10px;
        color: #333;
      }
    }
    .textarear-block {
      padding: 0 30px;
      textarea {
        width: calc(100% - 30px);
        height: 300px;
        border: none;
        resize: none;
        outline: none;
        font-size: 28px;
        line-height: 44px;
        padding: 10px;
        color: #333;
        border: 1px solid #eee;
        background: #f8f8f8;
        border-radius: 10px;
      }
    }
    // 上传文件
    .upload-item {
      padding: 0 40px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .upload-input {
        position: relative;
        width: 330px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 12px;
        span {
          text-align: center;
          font-size: 24px;
          color: #444;
          background: #fff;
        }
        input {
          position: absolute;
          top: 0;
          left: 0;
          border: none;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
      .word-tip {
        display: flex;
        flex-direction: column;
        span {
          width: 280px;
          font-size: 22px;
          line-height: 30px;
          color: #999;
          &.content {
            display: flex;

            color: $themeGold;
            align-items: center;

            i {
              line-height: 30px;
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
  .time-item {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 0 30px;
    h2 {
      height: 100px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .time-input {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 400px;
      height: 100px;
      span {
        margin-right: 15px;
        font-size: 30px;
        color: #444;
      }
    }
  }
  .op-btn {
    height: 120px;
    display: flex;
    padding-bottom: 50px;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    .btn {
      margin: 0 20px;
      width: 190px;
    }
  }
}
</style>
